<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>/* 伪类选择器   语法：任意选择器：hover【悬停】  每个伪类选择器，具备特点
						所有元素具备：hover 【常见伪类选择器】--> */
        h1:hover{
			background: #eee;
			color: #fff;
		}
		/* 
		 伪类选择器          link        链接未点击时的状态
		                    active       链接被点击时的状态
							visited       链接点击后的状态
							haver         悬停链接时的状态
		主要结合在一起，针对a元素效果*/
		a:link{
			/* 未访问状态 */
			color: #5555ff;
			/* 去掉超链接下划线 */
			text-decoration: #aaa;
		}
		a:active{
			color: #aaaaff;
			background: #ffaaff;
		}
		a:visited{
			color: #55aa7f;
			background: #aaffff;
		}
		a:hover{
			font-size: 36px;
		}
		/* 
		 伪类选择器: input focus 获取焦点  鼠标点击输入框时的效果
		 针对 输入框 input元素*/
		 input:focus{
			 background: #5555ff;
		 }
		 /* 伪类选择器        :first-child  第一个儿子元素
		                      :last-child  最后一个儿子元素
							  :nth-child(n)匹配n个儿子元素
			针对：父子级，默认父子级 table，列表*/
			li:first-child{
				background: #5555ff;
				color: #55aa7f;
			}
			li:last-child{
				font-size: 30px;
			}
			li:nth-child(2){
				background: #aaa;
				font-size: 10px;
			}
		</style>
	
	</head>
	<body>
		<h1>鼠标悬停效果</h1>
		<a href="#">超链接</a>
		<input type="text">
		<!-- 元素之间存在父子级关系，默认存在父子关系 -->
		<ol>
			<li>金珉奎</li>
			<li>徐明浩</li>
			<li>文俊辉</li>
			<li>全圆佑</li>
		</ol>
	</body>
</html>